<template>
	<div class="sidebar" id="sidebar">
		<div class="sidebar-shortcuts" id="sidebar-shortcuts">
			<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
				<button class="btn btn-success">
					<i class="icon-signal"></i>
				</button>

				<button class="btn btn-info">
					<i class="icon-pencil"></i>
				</button>

				<button class="btn btn-warning">
					<i class="icon-group"></i>
				</button>

				<button class="btn btn-danger">
					<i class="icon-cogs"></i>
				</button>
			</div>

			<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
				<span class="btn btn-success"></span>

				<span class="btn btn-info"></span>

				<span class="btn btn-warning"></span>

				<span class="btn btn-danger"></span>
			</div>
		</div>
		<!-- #sidebar-shortcuts -->

		<ul class="nav nav-list">
			<li class="active">
				<router-link to="appList">
				<a href="#">
					<i class="icon-dashboard"></i>
					<span class="menu-text">应用列表 </span>
				</a>
				</router-link>
			</li>

			<li>
				<router-link to="userList">
				<a href="typography.html">
					<i class="icon-text-width"></i>
					<span class="menu-text"> 用户列表</span>
				</a>
				</router-link>
			</li>

			<li>
				<a href="#" class="dropdown-toggle">
					<i class="icon-desktop"></i>
					<span class="menu-text"> UI 组件 </span>
				</a>

			</li>

			<li>
				<a href="#" class="dropdown-toggle">
					<i class="icon-file-alt"></i>

					<span class="menu-text">
						其他页面
					</span>
				</a>
			</li>
		</ul>

		<div class="sidebar-collapse" id="sidebar-collapse">
			<i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
		</div>

	</div>
</template>

<script>
export default {
    name: "Sidebar",
    data() {
        return {
            msg: "Welcome to Your Vue.js App"
        };
    },
    template: "#sidebar"
};
</script>

<style >

</style>
